<template>
  <Renderer
    ref="rendererC"
    antialias
    :orbit-ctrl="{ enableDamping: true }"
    resize="window"
  >
    <!-- <PerspectiveCamera
      :fov="45"
      :aspect="aspect"
      :near="1"
      :far="10000"
      :position="{ x: 400, y: 1300, z: 2300 }"
      :lookAt="{ x: 0, y: 0, z: 0 }"
    /> -->
    <Camera :position="{ z: 10 }" />
    <Scene ref="sceneC">
      <Mesh>
        <BoxGeometry
          :widthSegments="50"
          :heightSegments="50"
          :depthSegments="50"
        />
        <BasicMaterial
          color="#ff0000"
          :props="{ opacity: 0.5, transparent: true }"
        />
      </Mesh>
      <Mesh>
        <BoxGeometry
          :widthSegments="50"
          :heightSegments="50"
          :depthSegments="50"
        />
        <LambertMaterial color="#feb74c" />
      </Mesh>

      <Mesh>
        <BufferGeometry ref="bufferGeometryC" />
        <BasicMaterial
          color="#a4c2f4"
          :props="{ opacity: 1, transparent: true }"
        />
      </Mesh>

      <PointLight :position="{ y: 50, z: 50 }" />
      <Box :size="1" ref="meshC" :rotation="{ y: Math.PI / 4, z: Math.PI / 4 }">
        <LambertMaterial />
      </Box>
    </Scene>
  </Renderer>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import {
  Mesh,
  BoxGeometry,
  BasicMaterial,
  BufferGeometry, //Geometry
  Box,
  PerspectiveCamera,
  Camera,
  LambertMaterial,
  MeshPublicInterface,
  PointLight,
  Renderer,
  RendererPublicInterface,
  Scene,
} from "troisjs";

import * as THREE from "three";

const rendererC = ref();
const meshC = ref();
const sceneC = ref();

const aspect = ref(window.innerWidth / window.innerHeight);
console.log(aspect.value, "aspect.value");
// grid
//网格 大小 步长
var size = 1500,
  step = 100;
//几何函数
var geometry = new THREE.BufferGeometry();
//几何算法完成  复制
let vertices = [];
for (let i = -size; i <= size; i += step) {
  vertices.push([-size, 0, i]);
  vertices.push([size, 0, i]);
  vertices.push([i, 0, -size]);
  vertices.push([i, 0, size]);
}

geometry.setAttribute(
  "position",
  new THREE.BufferAttribute(new Float32Array([...vertices.flat()]), 3)
);

//材质
var material = new THREE.LineBasicMaterial({
  color: 0xa4c2f4,
  opacity: 1,
  transparent: true,
});

//加载 大小 材质
var line = new THREE.LineSegments(geometry, material);

onMounted(() => {
  //加载 到场景
  const scene = sceneC.value;
  scene.add(line);

  const renderer = rendererC.value as RendererPublicInterface;
  const mesh = (meshC.value as MeshPublicInterface).mesh;
  renderer.onBeforeRender(() => {
    mesh!.rotation.x += 0.01;
  });
});
</script>

<style>
body,
html {
  margin: 0;
}
canvas {
  display: block;
}
</style>
